<template>
  <div id="app">
    <div class="login-wrap1">
      <!-- <el-image class="logoicon" src="../../src1/assets/img/logo.png"></el-image> -->
      <div class="ms-login">
        <div class="display_flex flexDirection space-around height100 login_IconBox">
          <div class="display_flex align-items ms-title">
            <el-image class="logoicon" src="../../src1/assets/img/logo.png"></el-image>
            <!-- 生态资源申报流转平台 -->
            {{ platformName }}
          </div>
          <el-image class="logoImg" src="../../src1/assets/img/logo_icon.png"></el-image>
        </div>
        <div class="login_content">
          <div class="title">欢迎登录</div>
          <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
            <el-form-item prop="username">
              <el-input style="width: 90%" v-model="param.phone" placeholder="请输入手机号" @blur="handlblur">
                <template #prepend>
                  <el-image class="phone_icon" src="../../src1/assets/img/phone.png"></el-image>
                  <!-- <el-button icon="el-icon-phone-outline"></el-button> -->
                </template>
              </el-input>
            </el-form-item>
            <!-- <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            show-password
            v-model="param.passWord"
            @keyup.enter="submitForm()"
          >
            <template #prepend>
              <el-button icon="el-icon-lock"></el-button>
            </template>
          </el-input>
        </el-form-item> -->
            <el-form-item prop="sidentify">
              <el-row :gutter="15">
                <el-col :span="12"><el-input placeholder="图形码" v-model="param.imgCode" clearable prop="security"
                    class="graphicCode">
                    <template #prepend>
                      <el-image class="phone_icon" src="../../src1/assets/img/shieldCheck.png"></el-image>
                      <!-- <el-button icon="el-icon-phone-outline"></el-button> -->
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="3">
                  <div class="code" @click="refreshCode">
                    <img :src="imageCode" style="width: 130px; height: 40px" />
                    <!-- <security :identifyCode="identifyCode"></security> -->
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-input placeholder="验证码" v-model="param.code">
                    <template #prepend>
                      <el-image class="phone_icon" src="../../src1/assets/img/123@2x.png"></el-image>
                      <!-- <el-button icon="el-icon-phone-outline"></el-button> -->
                    </template></el-input></el-col>
                <el-col :span="3">
                  <el-button v-show="showtime" @click="sendCode()">
                    <span v-if="count == 0">重新发送</span>
                    <span v-else>{{ count }}</span>
                  </el-button>
                  <el-button v-show="!showtime" @click="sendCode()">
                    <span>重新发送（{{ count }}s）</span>
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <!-- <div class="find_password" @click="handleEdit(1, {})">找回密码</div> -->
            <div class="login-btn">
              <el-button type="primary" @click="submitForm()" class="loginBtn">登录</el-button>
              <el-button type="text" @click="handlebackgo()" class="backgo">返回首页 ></el-button>
            </div>
          </el-form>
        </div>
      </div>
      <el-dialog title="找回密码" v-model="editVisible" :close-on-click-modal="false" width="40%">
        <el-form label-width="70px">
          <el-form-item label="手机号">
            <el-input v-model="form.moblie"></el-input>
            <el-row :gutter="20" style="margin-top: 20px">
              <el-col :span="15">
                <el-input class="inputwidth" v-model="form.smsCode"></el-input></el-col>
              <el-col :span="3">
                <el-button v-show="showtime" @click="sendCode()">
                  <span v-if="count == 0">重新发送</span>
                  <span v-else>{{ count }}</span>
                </el-button>
                <el-button v-show="!showtime" @click="sendCode()">
                  <span>重新发送（{{ count }}s）</span>
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="form.password" show-password></el-input>
            <div class="passw">
              密码长度8-20个字符，可包含字母（区分大小写）,数字（除空格）元素
            </div>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="form.affirm_password" show-password></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEdit">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <div class="bottom—name toptitle">
        <span @click="handleHaXi"> 技术支持： 厦门哈希科技有限公司</span>
        <img style="height:20px;width:20px;margin:0 10px;position: relative;top:3px;" src="../assets/img/record.png" />
        <a href="https://beian.miit.gov.cn/" target="_blank">{{ servePlatform == 5 ? '蜀ICP备2022026667号-1' :
          '闽ICP备18008864号'
        }}</a>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import api from "../api/api";
import security from "../components/security.vue"; //**引入验证码组件**
export default {
  components: {
    security: security,
  },
  setup() {
    let { proxy } = getCurrentInstance();
    const router = useRouter();
    const servePlatform = ref(api.servePlatform());
    const platformName = ref("");
    proxy.$store.dispatch('getplatformName').then((res) => {
      platformName.value = res;
    })
    const param = reactive({
      phone: "",
      code: "",
      imgCode: "",
      token: "",
    });

    const rules = {
      userName: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
      ],
      passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
    };
    const login = ref(null);
    const imageCode = ref("");
    const getImageCode = () => {
      api.getListAPI("auth/randomCode/getImageCode", {}).then((resdata) => {
        if (resdata.data.code == 1) {
          console.log(resdata);
          imageCode.value =
            " data:image/jpeg;base64," + resdata.data.data.image;
          param.token = resdata.data.data.token;
        } else {
          ElMessage.error(resdata.data.message);
        }
      });
    };
    getImageCode();
    const submitForm = () => {
      if (param.phone == "") {
        ElMessage.error("请输入手机号");
        return;
      } else if (is_correct.value == false) {
        ElMessage.error("请输入正确的手机号");
      } else if (param.code == "") {
        ElMessage.error("请输入验证码");
        return;
      } else if (!param.imgCode) {
        ElMessage.error("图形码输入错误");
        return;
      } else {
        api
          .postFormAPI("auth/client/account/codeLogin", param)
          .then((resdata) => {
            console.log(resdata);
            if (resdata.data.code == 1) {
              localStorage.setItem("token", resdata.data.data);
              api
                .getListAPI("auth/client/account/loginAccountInfo", {})
                .then((res) => {
                  if (res.data.code == 1) {
                    ElMessage.success("登录成功");
                    localStorage.setItem(
                      "ms_username",
                      res.data.data.accountInfoDTO.realName
                    );
                    let userInfo = JSON.stringify(res.data.data.accountInfoDTO);
                    localStorage.setItem("userInfo", userInfo);
                    router.push("/");
                    // if (res.data.data.authState == 1) {
                    //   router.push("/");
                    // } else if (res.data.data.authState == -1) {
                    //   router.push("/user?info_attestation=true&is_inReview=true");
                    // } else {
                    //   router.push("/user?info_attestation=true");
                    // }
                  } else {
                    if (res.status == 401) {
                      router.push("/login");
                      ElMessage.error("请重新登录");
                    } else if (res.status == 500) {
                      ElMessage.error("登录失败");
                    } else {
                      // ElMessage.error(res.data.msg);
                    }
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            } else {
              ElMessage.error(resdata.data.message);
            }
            //数据处理
          })
          .catch((err) => console.log(err));
      }
    };
    let idx = -1;
    let form = reactive({
      moblie: "",
      smsCode: "",
      affirm_password: "",
      password: "",
    });
    const editVisible = ref(false);
    const handleEdit = (index, row) => {
      idx = index;
      Object.keys(form).forEach((item) => {
        form[item] = row[item];
      });
      editVisible.value = true;
    };
    const store = useStore();
    store.commit("clearTags");
    // 获取验证码
    const showtime = ref(true);
    const count = ref("点击获取验证码");
    const timer = ref(null);
    const sendCode = () => {
      var telStr =
        /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
      if (!param.phone) {
        ElMessage.error("请输入手机号");
        return;
      } else if (!telStr.test(param.phone)) {
        ElMessage.error("请输入正确的手机号");
        return;
      } else if (param.imgCode == "") {
        ElMessage.error("请输入图形验证码");
        return;
      } else {
        let TIME_count = 60;
        if (!timer.value) {
          console.log(count.value);
          count.value = TIME_count;
          showtime.value = false;
          api
            .postFormAPI("auth/randomCode/loginPhoneCode", param, 1)
            .then((res) => {
              if (res.data.code == 1) {
                ElMessage.success("验证码已发送");
                timer.value = setInterval(() => {
                  if (count.value > 0 && count.value <= TIME_count) {
                    count.value--;
                  } else {
                    showtime.value = true;
                    clearInterval(timer.value);
                    timer.value = null;
                  }
                }, 1000);
              } else {
                ElMessage.error(res.data.message);
              }
            })
            .catch((err) => console.log(err));
        }
      }
    };
    // 确定找回密码
    const saveEdit = () => {
      if (!form.moblie) {
        ElMessage.error("请输入手机号");
      } else if (!is_correct.value) {
        ElMessage.error("请输入正确的手机号");
      } else if (!form.smsCode) {
        ElMessage.error("请输入验证码");
      } else if (!form.password) {
        ElMessage.error("请输入新密码");
      } else if (!form.password) {
        ElMessage.error("请确认密码");
      } else if (form.affirm_password != form.password) {
        ElMessage.error("两次密码不一致");
      } else {
        api
          .postFormAPI(
            "auth/management/resetPwdByPhone",
            {
              phone: form.moblie,
              smsCode: form.smsCode,
              password: form.password,
            },
            1
          )
          .then((res) => {
            if (res.data.code == 1) {
              ElMessage.success("登录成功");
              localStorage.setItem("token", res.data.data);
            } else {
              ElMessage.error(res.data.msg);
            }
            //数据处理
          })
          .catch((err) => console.log(err));
      }
    };
    const code = ref("");
    const identifyCodes = ref("1234567890abcdef");
    const identifyCode = ref("");
    const randomNum = (min, max) => {
      return Math.floor(Math.random() * (max - min) + min);
    };
    const makeCode = (o, l) => {
      for (let i = 0; i < l; i++) {
        identifyCode.value +=
          identifyCodes.value[randomNum(0, identifyCodes.value.length)];
      }
      console.log(identifyCode.value);
    };
    const refreshCode = () => {
      getImageCode();
      // identifyCode.value = "";
      // makeCode(identifyCodes.value, 4);
    };
    makeCode(identifyCodes.value, 4);
    var is_correct = ref(true);
    const handlblur = () => {
      var reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg_tel.test(param.phone)) {
        ElMessage.error("请输入正确的手机号");
        is_correct.value = false;
        return false;
      } else {
        is_correct.value = true;
      }
    };
    const handlebackgo = () => {
      router.push("/index");
    };
    const handleHaXi = () => {
      window.open("http://www.zlinkchain.com/contents/183/1109.html", "_block");
    }
    return {
      imageCode,
      param,
      rules,
      is_correct,
      login,
      form,
      showtime,
      count,
      timer,
      platformName,
      editVisible,
      isDisabled: false,
      code,
      // 随机抽取四位数
      identifyCodes,
      identifyCode,
      checked: false,
      servePlatform,
      refreshCode,
      handlebackgo,
      handlblur,
      saveEdit,
      handleEdit,
      sendCode,
      submitForm, handleHaXi
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";

#app {
  // background-image: url(../../../img/bg-1.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, "microsoft yahei",
    arial, STHeiTi, sans-serif;
}

.login-wrap1 {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 60%;
  height: 100%;
  background-image: url(../assets/img/login-bg.png);
  background-size: 100% 100%;
  float: right; */
}

.ms-content {
  width: 400px;
}

.login_content .title {
  font-size: 36px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
  line-height: 54px;
  margin-bottom: 60px;
}

&:deep(.el-input__inner) {
  border: 0px;
  border-bottom: 1px solid #dcdfe6;
}

&:deep(.el-input-group__prepend) {
  border: 0px;
  border-bottom: 1px solid #dcdfe6;
  background-color: #fff;
}

.ms-title {
  width: 100%;
  text-align: center;
  font-size: 32px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #01957d;
}

.ms-login {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login_IconBox {}

.login_content {
  margin-left: 50px;
}

.phone_icon {
  height: 24px;
  width: 24px;
}

.logoicon {
  height: 34px;
  width: 34px;
  margin-right: 14px;
}

.logoImg {
  height: 418px;
  width: 588px;
}

.login-btn {
  margin-top: 20px;
  text-align: center;
}

.login-btn button {
  flex: 1;
  // width: 42%;
  // height: 36px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.backgo {
  width: 79px;
  height: 17px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 34px;
  position: relative;
  right: -180px;
}

.loginBtn {
  width: 320px;
  height: 68px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 30px;
  background: #01957d;
  border: 1px solid #01957d;
  border-radius: 34px;
}

.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}

.find_password {
  color: #ffffff;
  /* padding-bottom: 20px; */
  cursor: pointer;
}

.passw {
  font-size: 8px;
}

.bottom—name {
  width: 100%;
  position: fixed;
  bottom: 20px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.toptitle>a {
  color: #fff;
}
</style>
